<script setup>
import axios from "axios";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

let userName = ref("");
let password = ref();

const handleClick = () => {
  //一个函数
  axios({
    //使用这个方法发起一个post请求
    method: "post",
    url: "http://localhost:4000/login", //地址
    data: {
      username: userName.value, //表单输入值
      password: password.value,
    },
  })
    .then((res) => {
      //成功
      console.log(res.data);
      ElMessage({
        //组件
        message: res.data.msg,
        type: "warning",
      });
      // localStorage.setItem("username", res.data.data.username);
      localStorage.setItem("user", JSON.stringify(res.data.data)); //将用户数据转换为 JSON 字符串,存储到浏览器的 localStorage 中
      router.push("/home"); //vue的路由，导航到home
    })
    .catch((err) => {
      //失败
      ElMessage({
        message: res.data.msg,
        type: "error",
      });
    });
};

function name(params) {}
</script>

<template>
  <body>
    <div class="content-top">
      <div class="logo-d">
        <img src="/img/tubiaoblack.png" alt="" />
      </div>
    </div>
    <div class="content">
      <div class="content-left">
        <div class="form-left">
          <div class="huanying">
            <p>你好，</p>
            <p>欢迎来到力刻LIIKEE</p>
          </div>
          <div class="shurukuang">
            <div class="zhanghao">
              <input
                type="text"
                autocomplete="off"
                placeholder="手机号码/邮箱"
                v-model="userName"
              />
            </div>
            <div class="xinmima">
              <input
                type="text"
                autocomplete="off"
                placeholder="密码"
                v-model="password"
              />
            </div>
            <div class="denglukuang">
              <button class="denglu" @click="handleClick">登录</button>
            </div>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="form-right"></div>
      </div>
    </div>
  </body>
</template>

<style scoped>
body {
  background-color: #f1f1f1;
  height: 800px;
}
.content {
  display: flex;
}
.content-top {
  margin: 0 auto;
  text-align: center;
  height: 120px;
}
.content-top img {
  width: 450px;
  height: 60px;
  padding: 30px;
}
.content-left {
  width: 50%;
  height: 100%;
}
.content-right {
  width: 50%;
  height: 100%;
}
.form-left {
  width: 400px;
  height: 450px;
  float: right;
  background-color: white;
  border-radius: 10% 0 0 10%;
}
.form-right {
  width: 400px;
  height: 450px;
  float: left;
  background-color: white;
  border-radius: 0 10% 10% 0;
}
.huanying {
  text-align: left;
  padding: 10px 0 0 30px;
  font-weight: bold;
  font-size: 17px;
  line-height: 10px;
}
.shurukuang {
  padding: 1.2rem 1.2rem;
}
.zhanghao {
  margin: 20px 0;
}
.zhanghao input {
  width: 300px;
  height: 35px;
  padding: 0 12px;
  background-color: #eff4f7;
  border-radius: 2px;
  border: 1px solid #d6d6d6;
}
.xinmima {
  margin: 20px 0;
}
.xinmima input {
  width: 300px;
  height: 35px;
  padding: 0 12px;
  background-color: #eff4f7;
  border-radius: 2px;
  border: 1px solid #d6d6d6;
}

.denglukuang {
  margin: 40px 13px;
}
.denglu {
  width: 300px;
  height: 30px;
  background-color: rgb(234, 79, 36);
  border: 1px solid rgb(216, 212, 212);
  cursor: pointer;
}

.form-right {
  background-image: url("../img/dengluzhucetu.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
</style>
